<template>
	<view class="public-list-user">
		<scroll-view scroll-x="true">
			<view
				@click="clickTab('post','')"
				:class="tabHover == 'post'?'for hover':'for'">
				<view>发帖</view>
			</view>
			<view
				@click="clickTab('comment','')"
				:class="tabHover == 'comment'?'for hover':'for'">
				<view>评论</view>
			</view>
			<view
				@click="clickTab('follow','')"
				:class="tabHover == 'follow'?'for hover':'for'">
				<view>关注</view>
			</view>
			<template v-for="item in listRoles">
				<view
					:class="tabHover == item.rid?'for hover':'for'"
					@click="clickTab('',item.rid)">
					<view>{{item.name}}</view>
				</view>
			</template>
			
		</scroll-view>
		<template v-if="listUserState == 'success'">
			<view class="list-user">
				<view
					@click="$_To('user/user?uid=' + item.uid)"
					v-for="item in listUser"
					class="for Flex">
					<view class="_left">
						<image :src="item.avatar" mode="widthFix"></image>
					</view>
					<view class="_center">
						<view class="nickname H2">
							{{item.nickname}}
							<text class="P" :style="'color:'+item.nicknameColor+';'">{{item.roleName}}</text>
						</view>
						<view class="P">
							<text>{{item.stats.postPublishCount}}帖子</text>
							<text>{{item.stats.followMeCount}}关注</text>
							<text>{{item.stats.likeMeCount}}点赞</text>
						</view>
					</view>
					<view class="_right Flex">
						<view
							@click.stop="clickUserMark('follow',item)"
							class="Bj-BianKuangSe Zt-YuanSe">
							{{
								item.interaction.followStatus?
								"已关注":"关注"
							}}
						</view>
						<view
							@click.stop="clickUserMark('like',item)"
							class="Bj-BianKuangSe Zt-YuanSe">
							{{
								item.interaction.likeStatus?
								"已点赞":"点赞"
							}}
						</view>
						<view
							@click.stop="clickPrivateChat(item.uid)"
							class="Bj-LanSe"
							style="color: #FFF;">打招呼</view>
					</view>
				</view>
				<view
					@click="clickUserMore"
					class="more">点击加载更多</view>
			</view>
		</template>
		<template v-if="listUserState == 'loading'">
			<view class="skeleton-screen">
				<view class="_left loading-css"></view>
				<view class="_right loading-css"></view>
			</view>
			<view class="skeleton-screen">
				<view class="_left loading-css"></view>
				<view class="_right loading-css"></view>
			</view>
			<view class="skeleton-screen">
				<view class="_left loading-css"></view>
				<view class="_right loading-css"></view>
			</view>
		</template>
		<template v-if="listUserState == 'empty'">
			<public-empty></public-empty>
		</template>
	</view>
</template>

<script>
	export default {
		name:"public-list-user",
		data() {
			return {
				tabHover:"post",
				listRoles:[],
				listUser:[],
				listUserPage:2,
				listUserState:"loading"
			};
		},
		mounted(){
			this.getRoles()
		},
		methods:{
			// 获取用户角色
			getRoles(){
				this.$_Request(
					"GET","/api/v2/global/roles",
					{
						"type": 3,
					},
					(res) => {
						this.listRoles = res.data.data.list;
						this.getUser('post','');
					}
				)
			},
			// 获取，用户列表
			getUser(type,rid){
				this.userType = type;
				this.userRid = rid;
				this.$_Request(
					"GET","/api/v2/user/list",
					{
						"roles":this.userRid?this.userRid:"",
						"orderType":this.userType?this.userType:"",
						"whitelistKeys":"",
					},
					(res) => {
						if(res.data.data.list.length){
							this.listUser = res.data.data.list;
							uni.hideLoading();
							this.listUserState = "success"
						}else{
							this.listUserState = "empty"
						}
					}
				)
			},
			// 点击，切换卡
			clickTab(type,rid){
				if(type){
					this.tabHover = type;
				}else{
					this.tabHover = rid;
				}
				this.listUserState = "loading";
				this.listUserPage = 2;
				this.getUser(type,rid);
			},
			clickUserMore(){
				uni.showLoading({ title: "加载中" });
				this.$_Request(
					"GET","/api/v2/user/list",
					{
						"roles":this.userRid?this.userRid:"",
						"orderType":this.userType?this.userType:"",
						"whitelistKeys":"",
						"page":this.listUserPage,
					},
					(res) => {
						if(res.data.data.list.length){
							this.listUser = this.listUser.concat(res.data.data.list);
							this.listUserPage++
							uni.hideLoading();
						}else{
							uni.showToast({
								title: "没有数据啦",
								icon: "none",
								duration: 1000
							});
						}
					}
				)
			},
			clickUserMark(type,item){
				uni.showLoading();
				this.$_Request(
					"POST","/api/v2/user/mark",
					{
						"interactionType":type,
						"markType":"user",
						"fsid":item.uid.toString()
					},
					(res) => {
						uni.hideLoading();
						if(res.data.code == 0){
							if(type == 'like'){
								this.$set(item.interaction,'likeStatus',!item.interaction.likeStatus)
							}
							if(type == 'follow'){
								this.$set(item.interaction,'followStatus',!item.interaction.followStatus)
							}
						}else{
							uni.showToast({
								title:res.data.message,
								icon:"none",
								duration:1000
							});
						}
					}
				)
			},
			clickPrivateChat(uid){
				uni.showLoading();
				this.$_Request(
					"POST","/api/v2/conversation/send-message",
					{
						"uidOrUsername":uid+'',
						"message":'Hello~~'
					},
					(res) => {
						uni.hideLoading();
						if(res.data.code == 0){
							uni.switchTab({
								url: "/pages/notification/notification"
							});
						}else{
							uni.showToast({
								title:res.data.message,
								icon:"none",
								duration:1000
							});
						}
					}
				)
			},
		}
	}
</script>

<style lang="scss" scoped>
.public-list-user{
	scroll-view{
		white-space: nowrap;
		width: 648rpx;
		height: 80rpx;
		margin: 25rpx 25rpx 0 25rpx;
		background: $BeiJingSe;
		border-radius: 100rpx;
		border: 1rpx solid $BianKuangSe;
		padding: 0 25rpx;
		.for{
			height: 80rpx;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			view{
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				line-height: 28rpx;
				margin: 0 15rpx;
				color: $ZhanWeiSe;
			}
		}
		.hover{
			view{
				background: #FFF;
				padding: 15rpx 20rpx;
				border: 1rpx solid $BianKuangSe;
				border-radius: 100rpx;
				color: $YuanSe;
			}
		}
	}
	.list-user{
		.for{
			padding: 25rpx;
			border-bottom: 1rpx solid $BeiJingSe;
			._left{
				width: 80rpx;
				height: 80rpx;
				border-radius: 100%;
				overflow: hidden;
			}
			._center{
				flex: 1;
				margin: 0 15rpx;
				.nickname{
					.P{
						padding-left: 10rpx;
					}
				}
				.P{
					text{
						padding-right: 10rpx;
					}
				}
			}
			._right{
				align-items: center;
				view{
					font-size: 22rpx;
					line-height: 22rpx;
					margin: 0 0 0 15rpx;
					padding: 10rpx 15rpx;
					border-radius: 100rpx;
				}
			}
		}
		.more{
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			line-height: 28rpx;
			color: $ZhanWeiSe;
			padding: 35rpx 0;
		}
	}
}
.skeleton-screen{
	padding: 25rpx;
	border-bottom: 1rpx solid $BeiJingSe;
	display: flex;
	._left{
		width: 80rpx;
		height: 80rpx;
		border-radius: 100%;
	}
	._right{
		flex: 1;
		height: 80rpx;
		margin-left: 15rpx;
	}
}
</style>